<template>
    <div class="goodsTabContainer">
        <div v-for="item in search.goodsList" :key="item.id">
            <van-card
                :price="(item.lowestPrice * 0.01).toFixed(2) + '起'"
                :desc="'规格：' + item.packing"  
                :title="item.productName"
                :thumb="'https://image.jianke.com' + item.thumbnailUri"
                @click="goPro(item.productCode)">
                <div slot="tags" class="tags">
                    <div class="shop">厂商：{{item.manufacturer}}</div>
                    <van-icon name="cart-o" class="my-icon" />
                </div>
            </van-card>
        </div>
    </div>
</template>

<script>
import { Toast } from 'vant';
import BScroll from 'better-scroll'
import { mapState, mapActions } from 'vuex';
export default {
    data() {
        return {
            pn: 0,
            isTop: false,
            code: 0
        }
    },
    computed: {
        ...mapState(['search'])
    },
    methods: {
        ...mapActions(['getGoodsList', 'clearGoodsList']),
        // 开启滚动
        _startScroll() {
           let scroll = new BScroll('.van-tab__pane', {
                scrollY: true,
                probeType: 1,
                click: true,
                pullUpLoad: {
                    threshold: 50
                }
            })
            // 父级难调用，暂时挂载到window上
            window.scroll = scroll
            // 下拉加载
            scroll.on('pullingUp', () => {
                // 总页数
                let totalPage = this.search.totalPage
                if (this.pn < totalPage) {
                    this.getGoodsList({
                        cid: this.$route.params.code,
                        pn: this.pn + 1,
                        ps: 10
                    })
                }

                scroll.finishPullUp()        

                if (this.pn >= totalPage) {
                    Toast({
                        message: '到底咯',
                        position: 'bottom',
                        duration: 1000
                    });
                    return
                }

                this.pn++
            })
            // 监听滚动距离
            scroll.on('scroll', (pos) => {
                if (-pos.y > 600) {
                    this.search.isTop = true
                } else {
                    this.search.isTop = false
                }
            })
        },
        // 跳转到详情页
        goPro(code) {
            this.$router.push({path: `/product/${code}`})
        }
    },
    watch: {
        search() {
            this.$nextTick(() => {
                this._startScroll()
            })
        }
    },
    async mounted() {
        // 初始请求数据
        await this.getGoodsList({
            cid: this.$route.params.code,
            pn: 1,
            ps: 10
        })
        // 开启滚动
        this._startScroll()
    }
}
</script>

<style lang="scss" scoped>
    .goodsTabContainer {
        .van-card {
            background: #fff;
            border-bottom: 1px solid #ddd;
            padding: 12px 15px;
            .van-card__title {
                display: block;
                color: #333;
                font-weight: 700;
                font-size: 14px;
                text-overflow: ellipsis;/*这就是省略号喽*/		  
                overflow: hidden;/*设置超过的隐藏*/
                white-space: nowrap;/*设置不断行*/
                width:200px;/*设置宽度*/
            }
            .van-card__content {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                .tags {
                    position: relative;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    color: #999;
                    .shop {
                        text-overflow: ellipsis;/*这就是省略号喽*/		  
                        overflow: hidden;/*设置超过的隐藏*/
                        white-space: nowrap;/*设置不断行*/
                        width:200px;/*设置宽度*/
                    }
                }
                .van-card__price {
                    font-size: 14px;
                }
            }
        }
    }
</style>
